import React, { Component } from "react";
import { Carousel } from "antd-mobile";
import { get_Home_Swipe } from "../../utils/biz_http.js";

import Search from "./Search.js";

class Swiper extends Component {
  state = {
    data: [],
    imgHeight: 212,
  };
  componentDidMount() {
    this.getSwipe();
  }

  async getSwipe() {
    let res = await get_Home_Swipe();
    // console.log(res);
    this.setState({
      data: res.data.body,
    });
  }
  render() {
    return (
      <div>
        <Search></Search>

        {this.state.data.length > 0 && (
          <Carousel
            autoplay={true}
            infinite={true}
            // beforeChange={(from, to) => console.log(`slide from ${from} to ${to}`)}
            // afterChange={index => console.log('slide to', index)}
          >
            {this.state.data.map((val) => (
              <a
                key={val.id}
                href="http://www.itheima.com"
                style={{
                  display: "inline-block",
                  width: "100%",
                  height: this.state.imgHeight,
                }}
              >
                <img
                  src={`http://157.122.54.189:9060${val.imgSrc}`}
                  alt=""
                  style={{ width: "100%", verticalAlign: "top" }}
                  onLoad={() => {
                    // fire window resize event to change height
                    window.dispatchEvent(new Event("resize"));
                    this.setState({ imgHeight: "auto" });
                  }}
                />
              </a>
            ))}
          </Carousel>
        )}
      </div>
    );
  }
}

export default Swiper;
